<template>
	<view class="question-card">
    <view class="header">
      <u-avatar :src="src"></u-avatar>
      <view class="header-info">
        <text>我是一些文案</text>
        <text class="time">5天前</text>
      </view>
      <view class="header-tag">
        <u-button class="status-tag" shape="circle" text="105 ↑"></u-button>
      </view>
    </view>
    <view class="content">{{ content }}</view>
    <view class="process">
      进度条
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'http://placekitten.com/500/500',
        content: `如果是为了修改按钮与其他元素之间的距离或者宽度等，可以给按钮外面套一个view元素，控制这个view与其他元素的距离或者宽度，即可达到同等效果
        如果是为了修改按钮与其他元素之间的距离或者宽度等，可以给按钮外面套一个view元素，控制这个view与其他元素的距离或者宽度，即可达到同等效果
        如果是为了修改按钮与其他元素之间的距离或者宽度等，可以给按钮外面套一个view元素，控制这个view与其他元素的距离或者宽度，即可达到同等效果`
			}
		},
		onLoad() {
      console.log('--------1111------', uni.getSystemInfoSync().statusBarHeight)
		},
		methods: {
      click(item) {
        console.log('---------', item);
      }
		}
	}
</script>

<style lang="scss">
.question-card {
  margin: 20rpx;
  border: 2rpx solid rgb(218, 218, 218);
  border-radius: 16rpx;
  padding: 20rpx;

  .header {
    display: flex;
    align-items: center;
    padding-bottom: 20rpx;
    .header-info {
      margin-left: 12rpx;
      display: flex;
      flex: 1;
      overflow: hidden;
      flex-direction: column;
      .time {
        color: #999;
        font-size: 20rpx;
      }
    }
    .status-tag {
      color: red;
    }
  }
}

</style>
